<!-- 沟通页面 - 成长助手聊天界面 -->
<template>
  <view class="communication-page">
    <!-- 导航栏 -->
    <NavBar title="成长助手" showBack="true"></NavBar>
    
    <!-- 聊天内容区域 -->
    <view class="chat-container" ref="chatContainer">
      <!-- 欢迎消息 -->
      <view class="message-item ai-message" v-if="messages.length === 0">
        <view class="message-avatar">
          <uni-icons type="chatbubble" size="40" color="#4CAF50"></uni-icons>
        </view>
        <view class="message-content">
          <text>你好！我是你的成长助手，有什么可以帮助你的吗？</text>
        </view>
      </view>
      
      <!-- 消息列表 -->
      <view 
        class="message-item" 
        :class="{ 'user-message': message.type === 'user', 'ai-message': message.type === 'ai' }"
        v-for="(message, index) in messages" 
        :key="index"
      >
        <!-- 用户头像 -->
        <view class="message-avatar" v-if="message.type === 'user'">
          <uni-icons type="person" size="40" color="#666"></uni-icons>
        </view>
        
        <!-- 消息内容 -->
        <view class="message-content">
          <text>{{ message.content }}</text>
        </view>
        
        <!-- AI头像 -->
        <view class="message-avatar" v-if="message.type === 'ai'">
          <uni-icons type="chatbubble" size="40" color="#4CAF50"></uni-icons>
        </view>
      </view>
      
      <!-- 正在输入提示 -->
      <view class="typing-indicator" v-if="isTyping">
        <view class="message-item ai-message">
          <view class="message-avatar">
            <uni-icons type="chatbubble" size="40" color="#4CAF50"></uni-icons>
          </view>
          <view class="message-content">
            <view class="typing-dots">
              <span></span>
              <span></span>
              <span></span>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 输入区域 -->
    <view class="input-container">
      <uni-input 
        v-model="inputMessage" 
        placeholder="输入你的问题或需求..." 
        type="textarea" 
        maxlength="500"
        @confirm="sendMessage"
      ></uni-input>
      <uni-button type="primary" class="send-btn" @click="sendMessage" :disabled="!inputMessage.trim()">发送</uni-button>
    </view>
  </view>
</template>

<script>
// 导入组件
import NavBar from '../../components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 消息列表
      messages: [],
      // 输入框消息
      inputMessage: '',
      // 是否正在输入
      isTyping: false,
      // 模拟AI回复内容
      aiResponses: [
        '好的，我理解了。让我为你提供一些建议...',
        '这个问题很常见，许多家长都关心这个。我的建议是...',
        '非常好的想法！这样做可以帮助孩子更好地成长。',
        '根据你的描述，我认为可以尝试以下方法...',
        '这个年龄段的孩子确实需要特别的关注，让我来帮你分析一下...',
        '感谢你的信任！我会尽力为你提供最好的建议。'
      ]
    }
  },
  onShow() {
    // 页面显示时，滚动到底部
    this.scrollToBottom()
  },
  methods: {
    // 发送消息
    sendMessage() {
      const messageText = this.inputMessage.trim()
      
      if (!messageText) {
        return
      }
      
      // 添加用户消息到列表
      this.messages.push({
        type: 'user',
        content: messageText,
        timestamp: new Date().toISOString()
      })
      
      // 清空输入框
      this.inputMessage = ''
      
      // 滚动到底部
      this.scrollToBottom()
      
      // 显示正在输入提示
      this.isTyping = true
      
      // 模拟AI回复延迟
      setTimeout(() => {
        // 隐藏正在输入提示
        this.isTyping = false
        
        // 随机选择一个AI回复
        const randomIndex = Math.floor(Math.random() * this.aiResponses.length)
        const aiResponse = this.aiResponses[randomIndex]
        
        // 添加AI回复到列表
        this.messages.push({
          type: 'ai',
          content: aiResponse,
          timestamp: new Date().toISOString()
        })
        
        // 保存消息到本地存储
        this.saveMessages()
        
        // 滚动到底部
        this.scrollToBottom()
        
        // 播放提示音
        uni.vibrateShort()
      }, 1500 + Math.random() * 1000) // 随机延迟1.5-2.5秒
    },
    
    // 滚动到底部
    scrollToBottom() {
      setTimeout(() => {
        if (this.$refs.chatContainer) {
          const chatContainer = this.$refs.chatContainer
          chatContainer.scrollTop = chatContainer.scrollHeight
        }
      }, 100)
    },
    
    // 保存消息到本地存储
    saveMessages() {
      // 只保存最近50条消息，避免占用过多存储空间
      const recentMessages = this.messages.slice(-50)
      uni.setStorageSync('chatMessages', recentMessages)
    },
    
    // 加载历史消息
    loadMessages() {
      const savedMessages = uni.getStorageSync('chatMessages')
      if (savedMessages) {
        this.messages = savedMessages
      }
    }
  },
  onLoad() {
    // 页面加载时，加载历史消息
    this.loadMessages()
  }
}
</script>

<style scoped>
.communication-page {
  padding-top: 88rpx; /* 导航栏高度 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.chat-container {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.message-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
}

.ai-message {
  flex-direction: row;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15rpx;
}

.message-content {
  max-width: 70%;
  padding: 15rpx 20rpx;
  border-radius: 20rpx;
  word-break: break-word;
  line-height: 1.5;
}

.user-message .message-content {
  background-color: #4CAF50;
  color: white;
}

.ai-message .message-content {
  background-color: white;
  color: #333;
}

.typing-indicator {
  margin-bottom: 20rpx;
}

.typing-dots {
  display: flex;
  gap: 10rpx;
}

.typing-dots span {
  width: 10rpx;
  height: 10rpx;
  background-color: #999;
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.input-container {
  padding: 20rpx;
  background-color: white;
  border-top: 1rpx solid #eee;
}

.input-container uni-input {
  background-color: #f5f5f5;
  border-radius: 30rpx;
  margin-bottom: 15rpx;
}

.send-btn {
  background-color: #4CAF50 !important;
  color: white !important;
  border-radius: 30rpx;
  font-size: 28rpx;
}
</style>